<template>
	<view class="">
		<uvsticky offset-top="0" bgColor="#fff">
			<view class="titcss">
				<view class="lefcss">
					<text>{{yyInfo.cinemaName}}</text>
					<text>{{yyInfo.address}}</text>
				</view>
				<view class="rigcss" @click="gomap(yyInfo)">
					<uni-icons type="location" size="20"></uni-icons>
					<text>{{yyInfo.formattedDistance}}</text>
				</view>
			</view>
			<view v-if="chooseMovice" class="bgbau">
				<view class="swiper_main">
					<image class="background-img-vague" :src="chooseMovice.pic" mode="widthFix"></image>
					<view class="wrap">
						<swipers :list="movies" height="260" mode="none" name="pic" :autoplay="false"
							img-mode="scaleToFill" class="swiper_bg" :effect3d="true" bg-color="none" :circular="false"
							effect3d-previous-margin="280" @change="setBackground" :current="swiperCurrent"></swipers>
					</view>
					<div class="box"></div>
				</view>
				<view class="moive-name">{{chooseMovice.filmName}}</view>
				<view class="moive-info">{{chooseMovice.duration}}分钟 | {{chooseMovice.filmType}} | {{chooseMovice.language}}</view>
			</view>
			<view class="nocss" v-else>
				<image src="/static/sjimg/no.png" mode="widthFix" class="noimg"></image>
				<text>暂无影片</text>
			</view>
			<view class="moive-tab-list">
				<view class="tabs-list-item" :class="{'tab-sel':item==currentTab }" v-for="item in tabLists" :key="item" @click="getTimeTab(item)">
					{{item}}
					<view class="bottoms" v-if="item==currentTab"></view>
				</view>
			</view>
		</uvsticky>
		<view class="nomovcss" v-if="timeList.length==0">
			<image src="/static/sjimg/nomov.png" mode="widthFix" class="nomv"></image>
		</view>
		<view class="ticket-list" v-for="(value,index) in timeList" :key="index" v-else>
			<view style="width: 79%;">
				<view class="ticet-left">
					<view style="display: flex;align-items: center;">
						<text class="left-time">{{formatDate(value.showTime)}}</text>
						<text class="left-type">{{value.versionType}}</text>
					</view>
					<view style="display: flex;align-items: center;">
						<view class="ret-price"><text>￥</text>{{value.showPrice}}</view>
					</view>
				</view>
				<view class="ticet-booms">
					<text>时长:{{value.duration}}分钟</text>
					<text>{{value.hallName}}</text>
				</view>
			</view>
			<view class="buy-btns" @click="getGou(value)">购票</view>
		</view>
	</view>
</template>

<script setup>
	import { ref , reactive , onMounted , computed } from 'vue';
	import { onShow , onLoad , onReachBottom } from '@dcloudio/uni-app';
	import { apiCinema , apiTimovie } from '@/api/upapi.js';
	import uvsticky from '@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky';
	import swipers from '@/components/u-swiper.vue'
	import dayjs from 'dayjs';

	const currentDate = ref('');
	const currentTab = ref('');
	const filmIds = ref('');
	const yyInfo = ref({});
	const swiperCurrent = ref(0);
	const movies = ref([]);
	const chooseMovice = ref({});
	const tabLists = ref([]);
	const timeList = ref([]);
	
	const getGou =(e)=>{ 
		const mervalue = uni.getStorageSync('xwmemberId');
		if(!mervalue){
			uni.showToast({ title: '请先登录',icon:'none' });
			setTimeout(() => { uni.switchTab({ url:'/pages/index/my' }) }, 1000);
			return;
		}
		uni.navigateTo({ url: '/pagesA/movie/movieset?showId='+e.showId+'&filmId='+e.filmId+'&movieName='+e.filmName+'&movieTime='+e.showTime+'&movieType='+e.versionType+'&movieRoom='+e.hallName+'&sectionId='+e.sectionId })
	};
	const setBackground =(e) => {
		// swiperCurrent.value = index;
		// chooseMovice.value = movies.value[index];
		// filmIds.value=movies.value[index].filmId;
		console.log('rrr===',e);
		// const now = dayjs();
		// currentDate.value = now.format('YYYY-MM-DD');
		// currentTab.value = now.format('MM-DD');
		// timeList.value=[]
		// timsData();
	};
	const formatDate = (date) => {
	    return dayjs(date).format('HH:mm'); 
	};
	const getTimeTab =(item) => {
		currentTab.value = item;
		const fullDate = dayjs(`${dayjs().year()}-${item}`).format('YYYY-MM-DD');
		currentDate.value=fullDate;
		timeList.value=[]
		timsData();
	};
	const gomap=(a)=>{
		uni.openLocation({
			longitude: Number(a.longitude),
		    latitude: Number(a.latitude),
		    name: a.cinemaName,
		    address: a.address,
		    success: function (res) { },
			fail: function (error) { }
		})
	};
	const yuanData = async (e,a) => {
		try {
			let res = await apiCinema({ cinemaId:e,filmId:a });
			if(res.data.result==0){
				var data=res.data.object;
				chooseMovice.value=data[0];
				movies.value=data;
				filmIds.value=data[0].filmId;
				timsData();
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const timsData = async (i) => {
		try {
			let res = await apiTimovie({ date:currentDate.value,filmId:filmIds.value,cinemaId:yyInfo.value.cinemaId});
			if(res.data.result==0){
				timeList.value=res.data.object
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};

	onLoad((option) => {
		const now = dayjs();
		currentDate.value = now.format('YYYY-MM-DD');
		currentTab.value = now.format('MM-DD');
		// 将后四天的时间加入数组
		for (let i = 0; i <= 4; i++) {
		    const futureDate = now.add(i, 'day').format('MM-DD');
		    tabLists.value.push(futureDate);
		}
		yyInfo.value = JSON.parse(decodeURIComponent(option.data));
		console.log('yyInfo.value===',yyInfo.value);
		yuanData(yyInfo.value.cinemaId,option.filmId);
	});
</script>
<style>
	page{background-color: #fff;}
</style>
<style scoped lang="scss">
	.titcss {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;

		.lefcss {
			width: 85%;
			display: flex;
			flex-direction: column;

			>text:first-child {
				font-size: 28rpx;
				font-weight: 600;
			}

			>text:last-child {
				margin-top: 10rpx;
				font-size: 20rpx;
				color: #767676;
			}
		}

		.rigcss {
			display: flex;
			flex-direction: column;
			align-items: center;

			>text {
				font-size: 22rpx;
				color: #767676;
				margin-top: 4rpx;
			}
		}
	}

	.swiper_main {
		position: relative;
		height: 324rpx;
		overflow: hidden;

		.background-img-vague {
			position: absolute;
			left: 0;
			right: 0;
			width: 100%;
			// transform: translateX(-50%);
			filter: blur(15px);
			-webkit-filter: blur(15px);
		}

		.u-swiper-item {
			width: 193rpx !important;
			height: 260rpx !important;
		}

		// 影院背景图
		.moviebg {
			width: 100%;
			height: 100%;
			filter: blur(10rpx);
		}

		.wrap {
			position: absolute;
			left: 0;
			top: 26rpx;
			right: 0;
			margin: 0 auto;
		}

		.box {
			width: 0;
			height: 0;
			border: 10rpx solid;
			border-color: transparent transparent #fff #fff;
			transform: rotate(135deg);
			position: absolute;
			bottom: -10rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
		}

	}

	.moive-name {
		text-align: center;
		margin-top: 30rpx;
		color: #2D3039;
		font-size: 36rpx;
		font-weight: 600;
	}

	.moive-info {
		text-align: center;
		margin-top: 14rpx;
		color: #636775;
		font-size: 24rpx;
	}
	.nocss{
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		.noimg{
			width: 120rpx;
		}
		>text{
			font-size: 22rpx;
			margin-top: 10rpx;
			color: #b0b0b0;
		}
	}
	.moive-tab-list{
		padding: 20rpx;
		border-bottom: 2rpx solid #DFE0E2;
		background-color: #fff;
		overflow-x: auto;
		white-space:nowrap;
		width: auto;
		overflow-y: hidden;
		.tabs-list-item{
			padding: 0rpx 20rpx;
			display: inline-block;
			position: relative;
			color: #636775;
			font-size: 28rpx;
		}
		.tab-sel{
			color: #FE602B!important;
			font-size: 28rpx;
			font-weight: 550;
		}
		.bottoms{
			position: absolute;
			bottom: -30rpx;
			right:50%;
			left:50%;
			transform: translate(-50%, -50%);
			width: 52rpx;
			height: 8rpx;
			background-color: #FE602B;
		}
	}
	.nomovcss{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 120rpx;
		.nomv{
			width: 300rpx;
		}
	}
	.ticket-list{
		margin: 0rpx 32rpx;
		padding: 38rpx 0rpx;
		border-bottom: 2rpx solid #E0E1E3;
		display: flex;
		align-items: center;
		.ticet-left{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left-time{
				color: #2D3039;
				font-size: 42rpx;
			}
			.left-type{
				color: #2D3039;
				font-size: 28rpx;
				margin-left: 32rpx;
			}
			
		}
		.ticet-booms{
			display: flex;
			align-items: center;
			font-size: 22rpx;
			color: #767676;
			>text:last-child{
				margin-left: 20rpx;
			}
		}
		.ret-price{
			color: #FE602B;
			font-size: 42rpx;
			font-weight: 550;
			text{
				font-size: 28rpx;
			}
		}
		.ret-yuans{
			color: #A6A8AE;
			font-size: 28rpx;
			margin-left: 13rpx;
			text-decoration: line-through;
		}
	}
	.buy-btns{
		width: 110rpx;
		height: 58rpx;
		text-align: center;
		line-height: 58rpx;
		background: linear-gradient(207deg, #FF9272 0%, #FC5421 100%);
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: 550;
		margin-left: auto;
	}
</style>